<template>
	<view class="">
		<!-- menu菜单 平台数据  新闻资讯 -->
		<view class="news-box">
			<!-- menu菜单 -->
			<!-- <view class="acea-row row-between row-middle menus">
				<view class="menus-item" v-for="(item,index) in menus" :key="index">
					<image :src="'/static/images/index/'+item.image" mode=""></image>
					<view>{{item.name}}</view>
				</view>
			</view> -->
			<!-- <swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="rgba(231, 231, 231, 1)" indicator-active-color="rgba(238, 33, 45, 1)" @change="menuSwiperChange"> -->
			
			<!-- menu菜单 -->
			
			<menus  :types="6"/>
			<!-- 平台数据 -->
			<statistic />
			
			<!-- 新闻资讯 -->
			<newsModule />
		
		</view>
		
		<!-- 我的二手闲置 -->
		<secondHand />
		<!-- 我的二手闲置 -->
	<!-- 	<view class="module-box demand-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">我的二手闲置</view>
				<view class="demand-num">{{demandIdx+1 || 0}} / {{needsList.length || 0}}</view>
			</view>
			<view class="demand-swiper">
				<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" @change="needsSwiperChange">
					<swiper-item class="swiper-item" v-for="(item,index) in needsList" :key="index">
						<view class="swiper-item">
							需求信息 图片 优势 租金 转让费
							<view class="acea-row row-middle row-between demand-info">
								<view class="demand-info-tip">上新</view>
								<image src="@/static/images/index/store_img.png" mode=""></image>
								<view class="acea-row row-column row-between demand-info-l">
									<view class="info-tit line2">出售 | 九成新餐桌椅 </view>
									<view class="acea-row row-bottom info-money line1">
										<view class="sale-num">
											10套
										</view>
										<view class="rent-box"><text>3700</text>元</view>
										<view class="transfer-box">转让费: <text>10万</text></view>
									</view>
									<view class="acea-row advantage-box line2">
										<text>优势：</text>
										<text class="advantage">7年老店</text>
										<text class="advantage">100会员</text>
										<text class="advantage">7年老店</text>
										<text class="advantage">100会员</text>
										<text class="advantage">7年老店</text>
									</view>
								</view>
							</view>
							
							适合场所
							<view class="suitable-box">
								<text>优势：</text>
								<text class="suitable">酒吧</text>
								<text class="suitable">KTV</text>
								<text class="suitable">休闲娱乐</text>
								<text class="suitable">酒吧</text>
								<text class="suitable">休闲娱乐</text>
							</view>
							
							浏览、咨询统计
							<view class="acea-row row-middle row-between visit-box">
								<view class="visit-advtar">
									<image src="@/static/images/f.png" mode="" v-for="(item,index) in visitInfo" :key="index" :style="{left: (20 * index) + 'rpx'}"></image>
								</view>
								<view class="acea-row row-middle row-between visit-l">
									<view class="visit-num">18288人浏览</view>
									<view class="visit-num">5866人咨询</view>
								</view>
							</view>
							
							匹配信息
							<view class="acea-row row-middle row-between matching-box">
								<view>已为您匹配到889人，点击查看详情！</view>
								<image src="@/static/images/index/guid_icon.png" mode=""></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view> -->
		
		<!-- 悬赏任务（规则） -->
		<taskBox :tabNavOn="tabNavOn"/>
		<!-- 悬赏任务（规则） -->
		<!-- <view class="module-box task-box">
			<view class="acea-row row-middle row-between">
				<view class="module-title">悬赏任务（规则）</view>
				<view class="task-top-btn">赏金商城</view>
			</view>
			<view class="task-list">
				<view class="task-item" v-for="(item,index) in taskList" :key="index">
					<view class="acea-row row-top row-between item-top">
						<view class="task-tit line2">出租 | 汽车西站-五一广场-地下商业街| 2000㎡ | 20000元/㎡</view>
						<view class="task-tit-l">
							<view class="task-top-btn">领任务</view>
							<view>（已133人领）</view>
						</view>
					</view>
					<view class="acea-row row-bottom row-between item-bottom">
						<view class="share-list">
							<view class="share-item">
								分享赚1: <text>现金1000元</text>	（已托管平台）
							</view>
							<view class="share-item">
								分享赚2: <text>价值1888元(金币)</text>,剩余184(金币)
							</view>
						</view>
						<view class="item-bottom-btn">任务详情</view>
					</view>
				</view>
			</view>
			
			<view class="task-more-btn">
				查看更多任务
			</view>
		</view> -->
		

		<!-- 二手买卖  二手交换 -->
		<view class="goods">
			<view class="acea-row row-between goods-top">
				<view class="acea-row row-middle tabs">
					<view :class="['tab',goodsTabOn==index?'tab-on':'']" v-for="(item,index) in goodsTab" :key="index" @click="goodsTabOn=index">{{item}}</view>	
				</view>	
				<view class="shop-btn">
					金币商城
				</view>	
			</view>
			<view class="acea-row row-between goods-list">
				<view class="item" v-for="(item,index) in goodsList" :key="index">
					<view class="img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="info">
						<view class="title">
							出售 | {{ item.name }} | {{ item.stock || 0 }}套
						</view>	
						<view class="acea-row type-list">
							<view class="type" v-for="keyword in item.keyword">
								{{ keyword }}
							</view>
						</view>
						
						<view class="acea-row row-middle row-between price-info">
							<view class="price">
								<text>{{ item.price }}</text>元
							</view>
							<view class="wants">
								2人想要
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperDot from "../swiperDots/swiperDots.vue" 
	import menus from '../menu.vue';
	import statistic from '../statistic.vue'
	import newsModule from '../newsModule.vue'
	import secondHand from '../secondHand.vue'
	import taskBox from '../taskBox.vue'
	import {
		getSellListApi
	} from '@/api/api.js'
	
	export default{
		components: {swiperDot,menus,statistic,newsModule,secondHand,taskBox},
		props: {
			tabNavOn: {
				type: Number,
				default: 0
			}
		},
		data(){
			return {
				goodsTabOn:0,
				goodsTab:['二手买卖'],
				current:0,
				circular: true,
				autoplay: false,
				interval: 3000,
				duration: 500,
				// 浏览信息头像数组
				visitInfo:[1,2,3,4,5,6,7,8,9,10],
				demandIdx:0,//我的需求当前下标
				demandLength:4,//我的所有需求
				goodsList:[],
				needsList:[1,2,3,4],
				taskList:[1,2],
				
			}
		},
		mounted(){
			this.getSellList()
		},
		methods:{
			needsSwiperChange(e){
				// console.log(e)
				this.demandIdx = e.detail.current;
			},
			menuSwiperChange(e) {
					this.current = e.detail.current;
			},
			//
			async getSellList(){
				try{
					let { data } = await getSellListApi({ limit: 2});
					this.goodsList = data.list.map(item => {
						item.keyword = item.keyword.split(',');
						return item
					})
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss">
	// 各个模块样式
	.module-box{
		background: #ffffff;
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx;
		.module-title{
			padding-left: 18rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
			&::after{
				display: block;
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				margin-top: -15rpx;
				width: 6rpx;
				height: 30rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 34, 46, 1);
	
			}
		}
	}
	
	.btns{
			.white-bg{
				width: 154rpx;
				height: 50rpx;
				line-height:50rpx;
				text-align: center;
				opacity: 1;
				border-radius: 32rpx;
				border: 1px solid rgba(238, 33, 45, 1);
				background: #ffffff;
				font-size: 24rpx;
				color: rgba(238, 33, 45, 1);
				margin-right: 16rpx;
			}
			.red-bg{
				width: 154rpx;
				height: 50rpx;
				line-height:50rpx;
				text-align: center;
				opacity: 1;
				border-radius: 32rpx;
				border: 1px solid rgba(238, 33, 45, 1);   
				background:rgba(238, 33, 45, 1);
				font-size: 24rpx;
				color: #ffffff;
			}
		}
	.news-box{
		width: calc(100% - 52rpx);
		margin: 164rpx 26rpx 28rpx;
		background: #ffffff;
		opacity: 1;
		border-radius: 10rpx;
		padding: 36rpx;
		.menus{
			margin-bottom: 36rpx;
			// .menus-siper{
			// 	// 列数
			// 	column-count: 4;
			// 	// 间隔
			// 	column-gap: 18rpx;
			// }
			
			.menus-item{
				width: 25%;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 1);
				text-align: center;
				view{
					padding: 30rpx 0;
				}
				image{
					display: block;
					margin: 0 auto;
					width: 80rpx;
					height: 80rpx;
				}
			}
			// .menuss-item~.menus-item{
			// 	margin-left: 30rpx;
			// }
		}
	}
	
	// 平台数据
	.platform-datas{
		margin-bottom: 36rpx;
		 // display: grid;
		  /*  声明列的宽度  */
		  // grid-template-columns: repeat(3, 30%);
		.platform-item{
			width: 33%;
			text-align: center;
			// width: 160rpx;
			margin-bottom: 24rpx;
			.datas{
				font-size: 44rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}
			.name{
				width: 180rpx;
				font-size: 22rpx;
				color: rgba(128, 128, 128, 1);
			}
			.datas-doc{
				padding-right: 22rpx;
				position: relative;
				display: inline-block;
				&::after{
					display: block;
					content: '＋';
					position: absolute;
					color: rgba(239, 42, 54, 1);
					font-size: 22rpx;
					top: 0;
					right: 0;
				}
			}
		}
	}
	.news-data{
		border-top: 1px solid rgba(247, 247, 247, 1);
		image{
			width: 84rpx;
			height: 84rpx;
		}
		.news-list{
			width: calc(100% - 126rpx );
			height: 84rpx;
			.news-swiper,.news-swiper-item,.swiper-item{
				height: 100%;
			}
			.news-item{
				padding-left: 16rpx;
				position: relative;
				&::after{
					display: block;
					content: '';
					position: absolute;
					width: 4rpx;
					height: 4rpx;
					background: #000000;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-4rpx);
					left: 0;
				}
				.news-cont{
					width: 80%;
					font-size: 28rpx;
					color: rgba(56, 56, 56, 1);
				}
				.news-time{
					font-size: 22rpx;
					color: rgba(166, 166, 166, 1);
				}
			}
			.news-item~.news-item{
				margin-top: 10rpx;
			}
		}
	}
	
	// 我的需求
	.demand-box{
		.demand-num{
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(212, 212, 229, 1);
		}
		.demand-swiper{
			width: 100%;
			min-height: 402rpx;
			.swiper-box,.swiper-item{
				width: 100%;
				height: 402rpx;
			}
			// 需求图片及信息
			.demand-info{
				margin-top: 30rpx;
				position: relative;
				.demand-info-tip{
					position: absolute;
					left: 0px;
					top: 0px;
					width: 66rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
	
				}
				image{
					display: block;
					margin: 0;
					width: 236rpx;
					height: 210rpx;
					border-radius: 10rpx;
				}
				.demand-info-l{
					width:calc(100% - 236rpx - 20rpx);
					height: 210rpx;
					.info-tit{
						width: 100%;
						margin-bottom: 8rpx;
					}
					.info-money{
						width: 100%;
						margin-bottom: 8rpx;
						.sale-num{
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(128, 128, 128, 1);
							margin-right: 6rpx;
						}
						.rent-box{
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);
							text{
								font-size: 36rpx;
								font-weight: 700;
								color: rgba(238, 33, 45, 1);
							}
						}
						.transfer-box{
							margin-left: 18rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(56, 56, 56, 1);
							text{
								font-weight: 700;
							}
						}
					}
					
					.advantage-box{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
						.advantage{
							// width: 104px;
							padding: 0 12rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 4px;
							background: rgba(255, 232, 234, 1);
							letter-spacing: 0.4rpx;
							margin-left: 14rpx;
							margin-bottom: 10rpx;
							white-space: nowrap;
						}
					}
				}
			}
		
			// 适合场所
			
			.suitable-box{
				margin-top: 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(82, 104, 139, 1);
				padding-bottom: 30rpx;
				border-bottom: 1px solid rgba(238, 238, 238, 1);
				.suitable{
					display: inline-block;
					letter-spacing: 0.4rpx;
					padding: 10rpx;
					border-radius: 4rpx;
					background: rgba(248, 249, 253, 1);
					margin-left: 12rpx;
					white-space: nowrap;
				}
			}
			
			// 浏览咨询统计
			.visit-box{
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-top: 1px solid rgba(238, 238, 238, 1);
				.visit-advtar{
					width: 40%;
					height: 46rpx;
					position: relative;
					image{
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
				.visit-l{
					width: 60%;
					height: 46rpx;
					.visit-num{
						font-size: 26rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
					}
				}
				
			}
			
			// 匹配信息
			.matching-box{
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				image{
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	
	
	// 悬赏任务
	.task-box{
		.task-more-btn{
			margin: 24rpx auto;
			width: 222rpx;
			height: 52rpx;
			opacity: 1;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1);    
			font-size: 26rpx;
			font-weight: 400;
			line-height: 52rpx;
			color: rgba(238, 33, 45, 1);
			text-align: center;
		}
		.task-top-btn{
			width: 154rpx;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 30rpx;
			border: 1px solid rgba(238, 33, 45, 1); 
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(238, 33, 45, 1);
		}
		
		.task-list{
			.task-item{
				padding: 16rpx 22rpx;
				height: 218rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 2rpx 4rpx 8rpx 10rpx rgba(0, 0, 0, 0.03);
				margin-top: 28rpx;
				
				.item-top{
					.task-tit{
						width: 65%;
					}
					.task-tit-l{
						// width: 30%;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(166, 166, 166, 1);
						text-align: center;
						.task-top-btn{
							width: 132rpx;
							height: 42rpx;
							margin: 0 auto 6rpx;
							line-height: 42rpx;
							text-align: center;
							border-radius: 50rpx;
							background: rgba(238, 33, 45, 1);
							border: 1px solid rgba(235, 36, 61, 1);
							color: #ffffff;
						}
					}
				}
				
				.item-bottom{
					.share-list{
						width: 75%;
						.share-item{
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
							margin-top: 12rpx;
							text{
								/** 文本2 */
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(212, 48, 48, 1);
							}
						}
					}
					.item-bottom-btn{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
	
					}
				}
			}
		}
	}
	
	// 二手买卖  二手交换物品

	.goods{
		border-radius: 10rpx 10rpx 0 0;
		margin: 0 26rpx 26rpx;
		padding: 36rpx 0;
		.goods-top{
			.tabs{
				.tab{
					font-size: 32rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
					margin-right: 24rpx;
				}
				.tab-on{
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
				}
			}
			.shop-btn{
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
				padding: 4rpx 24rpx;
				border-radius: 30rpx;
				border: 1px solid rgba(238, 33, 45, 1);      
			}
		}
		.goods-list{
			padding: 30rpx 0;
			.item{
				width: 48%;
				border-radius: 20rpx;
				background: rgba(255, 255, 255, 1);
				.img{
					width: 100%;
					height: 288rpx;
					border-radius: 20rpx 20rpx 0 0;
					background: #ff0000;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx 20rpx 0 0;
					}
				}
				.info{
					padding: 18rpx;
					.title{
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;
						color: rgba(0, 0, 0, 1);
					}
					.type-list{
						padding: 12rpx 0;
					}
					.type{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
						padding: 0 12rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 4rpx;
						background: rgba(255, 232, 234, 1);
						letter-spacing: 0.4rpx;
						margin-left: 14rpx;
						margin-bottom: 10rpx;
						white-space: nowrap;
					}
					
					.price-info{
						.price{
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(238, 33, 45, 1);
							text{
								font-size: 36rpx;
								font-weight: 700;
							}
						}
						.wants{
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(166, 166, 166, 1);
						}
					}
				}
			}
		}
	}
</style>